.index-main {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .main-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 800px;
    height: 400px;

    .head-portrait {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s ease; /* 添加转动动画过渡 */
    }

    .circle-border {
      position: absolute;
      width: 140px;  /* 缩小外圈 */
      height: 140px; /* 缩小外圈 */
      border: 3px solid #fffffff1; /* 外圈颜色 */
      border-radius: 50%;
      pointer-events: none; /* 确保不会阻止点击头像 */
    }

    img {
      width: 130px;
      user-select: none;
      border-radius: 50%;
      transition: transform 0.6s ease-in-out; /* 保留头像的转动动画 */
    }

    .head-portrait:hover img {
      transform: rotate(360deg); /* 头像的旋转动画 */
    }

    .text-box {
      margin-top: 20px;
      font-family: ZhuZiAYuanJWD, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", STZhongsong, "Lantinghei SC", sans-serif;
      font-size: 35px;
      font-weight: 800;
      letter-spacing: 2px;
      cursor: pointer;
      user-select: none;
      background-image: linear-gradient(90deg, #673ab7, #e91e63, #4242f4);
      background-clip: text;
      word-spacing: 2px;
      -webkit-text-fill-color: transparent;
      animation: textAnimation 10s infinite ease-in-out;
    }

    @keyframes textAnimation {
      0% {
        letter-spacing: 2px;
        word-spacing: 2px;
      }
      50% {
        letter-spacing: 5px;
        word-spacing: 5px;
      }
      100% {
        letter-spacing: 2px;
        word-spacing: 2px;
      }
    }
  }

  .down-icon-main .icon {
    position: absolute;
    bottom: 20px;
    left: 50%;
    animation: float-animation 1.4s infinite ease-in-out;
  }

  @keyframes float-animation {
    0% {
      transform: translateY(0) translateX(-50%);
    }

    50% {
      opacity: 0.6;
      transform: translateY(-10px) translateX(-50%);
    }

    100% {
      transform: translateY(0) translateX(-50%);
    }
  }
}